<template>
  <div>
    <Card>
      <p slot="title">
        <Icon type="person-add"></Icon>&nbsp;修改密码
      </p>
      <Form ref="formValidate" :model="formItem" :rules="ruleValidate" :label-width="150">
        <Form-item label="原始密码" prop="oldPassword">
          <Input v-model="formItem.oldPassword" type="password" placeholder="原始密码" />
        </Form-item>
        <Form-item label="登录密码" prop="password">
          <Input v-model="formItem.password" type="password" placeholder="新密码" />
        </Form-item>
        <Form-item label="确认密码" prop="confirmPw">
          <Input v-model="formItem.confirmPw" type="password" placeholder="请确认密码" />
        </Form-item>
        <Form-item>
          <div>
            <Button type="primary" @click="handleSubmit('formValidate')" v-has="blog/edit">提交</Button>
          </div>

          <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
        </Form-item>
      </Form>
    </Card>
  </div>
</template>
<script>
import { editPassword } from "@/api/adminApi";
import { resetTokenAndClearUser } from "../utils";

export default {
  name: "editPassword",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.formItem.oldPassword == this.formItem.password) {
          callback(new Error("密码不能和原密码一致"));
        }
        if (this.formItem.password !== "") {
          // 对第二个密码框单独验证
          this.$refs.formValidate.validateField("confirmPw");
        }
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formItem.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      formItem: {
        oldPassword: "",
        password: "",
        confirmPw: ""
      },
      ruleValidate: {
        oldPassword: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        confirmPw: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validatePassCheck, trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  methods: {
    handleSubmit(name) {
      // _this指向vue实例
      let _this = this;
      this.$refs[name].validate(val => {
        if (val) {
          editPassword(this.formItem).then(res => {
            if (res.data.code == 200) {
              this.$Message.info("密码修改成功");
              //清除用户信息,重新刷新路由
              resetTokenAndClearUser();
              //跳转到登录页面
              _this.$router.push({ name: "login" });
            }
          });
        }
      });
      //修改密码
      editPassword();
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
